<template>
	<view class="diy-pintuan" v-if="list.length" :data-theme="themeStyle" :style="{ backgroundColor: value.backgroundColor, padding: value.padding * 2 + 'rpx 0rpx' }">
		<view class="diy-pintuan-top" v-if="value.list">
			<view class="pintuan-title">
				<image class="left-img" :src="$util.img(value.list.imageUrl)" v-if="value.list.imageUrl"></image>
				<text class="pintuan-title-name" :style="{ color: value.titleTextColor}">{{ value.list.title }}</text>
				<!-- <swiper :autoplay="true" :duration="1000" class="pintuan-ptyh" :vertical="true">
					<swiper-item class="ptyh">
						<image src="" mode=""></image>
						<text>|</text>
						<text>王**刚拼团成功</text>
					</swiper-item>
				</swiper> -->
			</view>
			<view class="pintuan-more" @click="toMore()" :style="{ color: value.moreTextColor }">{{ value.listMore.title }}</view>
		</view>

		<!-- <view class="pintuan-content" v-for="(item, index) in list" :key="index" @click="toDetail(item.id)">
			<image :src="$util.img(item.sku_image, { size: 'mid' })" mode="widthFix" @error="imageError(index)"></image>
			<view class="content-right">
				<view class="title-box">
					<view class="goods-title">{{ item.goods_name }}</view>
				</view>
				<view class="goods-size">
					<view class="ns-text-color ns-border-color info-size">{{ item.pintuan_num }}人团</view>
					<view class="info-num ns-gradient-promotionpages-pintuan-payment ns-text-color" :data-theme="themeStyle">已成团{{ item.order_num }}件</view>
				</view>
				<view class="goods-price">
					<view class="price">
						<text>￥{{ item.price }}</text>
						<text class="ns-text-color">￥{{ item.pintuan_price }}</text>
					</view>
					<view class="btn ns-bg-color">去拼团</view>
				</view>
			</view>
		</view> -->
		<ns-goods-item-col :value="list" @toDetail="toDetail" type="pintuan"></ns-goods-item-col>
	</view>
</template>

<script>
import globalConfig from '@/common/js/golbalConfig.js';
import nsGoodsItemCol from '@/components/ns-goods-item/ns-goods-item-col.vue';
export default {
	name: 'diy-pintuan',
	props: {
		value: {
			type: Object
		}
	},
	data() {
		return {
			list: []
		};
	},
	components: {
		nsGoodsItemCol
	},
	created() {
		this.getData();
	},
	mixins: [globalConfig],
	methods: {
		toMore() {
			this.$util.redirectTo('/promotionpages/pintuan/list/list');
		},
		getData() {
			var data = {
				page: 1,
				page_size: this.value.goodsCount
			};
			if (this.value.sources == 'diy') {
				data.goods_id_arr = this.value.goodsId.toString();
			}
			this.$api.sendRequest({
				url: '/pintuan/api/goods/page',
				data: data,
				success: res => {
					if (res.code == 0) {
						this.list = res.data.list;
					}
				}
			});
		},
		toDetail(e) {
			this.$util.redirectTo('/promotionpages/pintuan/detail/detail', {
				id: e.id
			});
		},
		imageError(index) {
			this.list[index].sku_image = this.$util.getDefaultImage().default_goods_img;
			this.$forceUpdate();
		}
	}
};
</script>

<style lang="scss">
scroll-view ::-webkit-scrollbar {
	width: 0;
	height: 0;
	background-color: transparent;
}
.diy-pintuan {
	width: 100%;
	box-sizing: border-box;
	// background: #fff;
	// background-color: #f7f7f7;
}
.diy-pintuan-top {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 0 0 $ns-padding;
	box-sizing: border-box;

	.pintuan-title {
		width: 65%;
		display: flex;
		align-items: center;

		.left-img {
			width: 50rpx;
			height: 50rpx;
			margin-right: 10rpx;
		}
		.pintuan-title-name {
			font-size: $ns-font-size-lg;
			font-weight: bold;
		}
		.pintuan-ptyh {
			flex: 1;
			height: 40rpx;
			margin-left: 20rpx;
			.ptyh {
				display: flex;
				align-items: center;
				image {
					width: 32rpx;
					height: 32rpx;
					border-radius: 50%;
				}
				text {
					font-size: $ns-font-size-x-sm;
					color: rgba(121, 121, 121, 1);
					padding: 0 5rpx;
				}
			}
		}
	}

	.pintuan-more {
		font-size: $ns-font-size-base;
		color: #858585;
		margin-right: 20rpx;
	}

	.pintuan-more::after {
		font-family: 'iconfont';
		content: '\e6a3';
		font-size: $ns-font-size-lg;
		line-height: 1;
		position: relative;
		top: 2rpx;
		margin-left: 4rpx;
	}
}

</style>
